import styled from "styled-components";

export const DetailBox = styled.div`
  padding: 0.12rem 0.15rem 0.15rem;
  background: #fff;
  color: #797d82;
  .detailtype,
  .releasetime,
  .addresstime {
    margin-top: 0.04rem;
    font-size: 0.13rem;
    height: 0.2rem;
    line-height: 0.2rem;
  }
  .detailname {
    overflow: hidden;
    .title {
      float: left;
      font-size: 18px;
      margin-right: 0.07rem;
      color: #000;
    }
    .type {
      float: left;
      background: #ccc;
      padding: 0.02rem;
      color: #fff;
    }
    .grade {
      float: right;
      color: #ffb232;
      .grade-num {
        font-size: 18px;
      }
      .grade-text {
        font-size: 12px;
      }
    }
  }
  .detailtype {
    margin-top: 0.04rem;
  }
  .detailinner {
    font-size: 13px;
    margin-top: 0.12rem;
    overflow: hidden;
    line-height: 0.2rem;
    transition: height 1s ease;
    height: auto;
  }
  .hidden {
    height: 0.38rem;
  }
`;

export const DetailActor = styled.div`
  margin-top: 0.1rem;
  background: #fff;
  .actor-title {
    font-size: 0.18rem;
    padding: 0.15rem;
  }
  .actors-warper {
    padding-left: 0.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    > ul {
      display: flex;
      position: relative;
      padding-bottom: 0.1rem;
      width: 100%;

      li {
        position: relative;
        margin-right: 0.1rem;
        width: 0.85rem;
        min-width: 0.85rem;
        &:last-child {
          padding-right: 0.1rem;
        }
        > span {
          display: block;
          text-align: center;
        }
      }
      img {
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
`;

export const Photo = styled.div`
  margin-top: 0.1rem;
  background: #fff;
  padding-bottom: 0.15rem;
  margin-bottom: 0.6rem;
  .photos::-webkit-scrollbar {
    display: none;
  }
  ul {
    display: flex;
    position: relative;
    padding-bottom: 0.1rem;
    width: 100%;
    li {
      margin-right: 0.1rem;
      overflow: hidden;
      position: relative;
    }
  }
  .title {
    padding: 0.15rem;
  }
  .title-name {
    font-size: 0.16rem;
  }
  .title-all {
    float: right;
  }
  img {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
`;

export const BuyBut = styled.div`
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  text-align: center;
  font-size: 0.16rem;
  background: #ff5f16;
  line-height: 0.5rem;
  color: #fff;
`;
